*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:'Inter',sans-serif;background-color:#171717;color:#f9fafb;display:grid;place-items:center;overflow:hidden;padding:1rem}main{position:relative;width:100%;max-width:450px;padding:2rem;text-align:center;border-radius:1rem;background-color:#171717;outline:1px solid #94a3b8;outline-offset:-8px;overflow:hidden;transition:transform .5s ease;box-shadow:0 1px 2px 0 rgb(14 165 233 / .5)}main:hover{transform:rotate(3deg)}main::before,main::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);transition:all .5s ease;z-index:0}main::before{width:120px;height:120px;background-color:#0369a1;top:20px;right:10px}main::after{width:100px;height:100px;background-color:#7dd3fc;bottom:30px;left:10px}main:hover::before{transform:translate(-50px,20px)}main:hover::after{transform:translate(50px,-20px)}main>*{position:relative;z-index:10}img{display:block;width:96px;height:96px;margin:0 auto 1rem;border-radius:50%;border:2px solid #f9fafb;background-color:#262626}h1{font-size:clamp(2.25rem,6vw,3rem);font-weight:700;line-height:1.2;color:#f9fafb;margin-bottom:.75rem}p{font-size:clamp(1rem,2.5vw,1.1rem);line-height:1.5;color:#d1d5db;margin-bottom:2rem}a{display:inline-block;padding:.75rem 1.5rem;background-color:#0ea5e9;color:#fff;font-weight:700;text-decoration:none;border-radius:.5rem;transition:all .3s ease;border:1px solid #0ea5e9}a:hover,a:focus{background-color:#0284c7;border-color:#0284c7;transform:scale(1.05);box-shadow:0 4px 15px rgba(14,165,233,0.3)}footer{position:fixed;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.8);backdrop-filter:blur(5px);padding:1rem;display:flex;justify-content:center;align-items:center;gap:1rem;transform:translateY(100%);transition:transform .5s ease;z-index:100;flex-wrap:wrap;text-align:center}footer.show{transform:translateY(0)}footer p{color:#d1d5db;margin:0;font-size:.9rem;flex-basis:100%;margin-bottom:.5rem}@media(min-width:600px){footer p{flex-basis:auto;margin-bottom:0}}footer button{padding:.5rem 1rem;border:none;border-radius:.5rem;background-color:#0ea5e9;color:#fff;cursor:pointer;font-weight:700;transition:background-color .3s ease}footer button:hover{background-color:#0284c7}